{% extends 'base.html.twig' %}

{% block body %}
    <div class="col-md-10 col-md-offset-1">
        <h1>
            Selecionando Elementos
        </h1>
        <p>
            El más básico concepto de jQuery  es “seleccionar algunos elementos y hacer algo con ellos.” jQuery soporta la mayoría de selectores de CSS3, así como algunos que no son estándar. Para una competa referencia de los selectores, ve al siguiente enlace <a href="http://api.jquery.com/category/selectors/">Selectors documentation on api.jquery.com</a>.
        </p>
        <p>Para seleccionar elementos en jQuery, realmente el mayor impedimento es tu imaginación. La potencia que tiene jQuery permite seleccionar elementos de una manera bastante creativa y potente.
            Se puede seleccionar por medio de id, clase, filtrando, se puede seleccionar por atributo, etc.
            A continuación vamos a ver en detalle como hacerlo.
        </p>
        <h3>Seleccionando elementos por Id</h3>
        <br>
    <pre>
        <code>
$( "#myId" );
            </code>
    </pre>
    <br>
    <h3>Seleccionando elementos por Clase</h3>
        <br>
    <pre>
        <code>
$( ".myClass" );
            </code>
    </pre>
    <br>
    <h3>Seleccionando elementos por Atributo</h3>
        <br>
    <pre>
        <code>
$( "input[name='first_name']" );

            </code>
    </pre>
    <br>
    <h3>Seleccionando elementos por Combinación</h3>
        <br>
    <pre>
        <code>
$( "#contents ul.people li" );
            </code>
    </pre>
    <br>
    <h3>Seleccionando varios elementos separados por coma</h3>
        <br>
    <pre>
        <code>
$( "div.myClass, ul.people" );
            </code>
    </pre>
    <br>
    <h3>Pseudo selectores</h3>
    <p>Existen numerosas formas de seleccionar elementos que no son parte de las especificaciones de CSS.
        Por ello vamos a proceder a explicar algunas de ellas.
    </p>
    <h4>:odd y :even Selector</h4>
    <p>Se seleccionan los elementos impares de la página web. Al empezar desde la base de 0, se seleccionará el segundo elemento, el cuarto, etc.
Como :odd no es parte de CSS, se debe de usar un selector CSS para usarlo de manera más eficiente. Se seleccionan los elementos en el orden de aparición en el documento.
    </p>
    <button type="button" class="btn btn-success odd-li">Elementos li:odd</button>
    <button type="button" class="btn btn-primary even-li">Elementos li:even</button>
    <button type="button" class="btn btn-success odd-p">Elementos p:odd</button>
    <button type="button" class="btn btn-primary even-p">Elementos p:even</button>
    
    <button type="button" class="btn btn-primary clear-oddeven">Limpiar estilos</button>
        <br>
    <pre>
        <code>
$(function() {
   $(".odd-li").click(function() {
       $("p, li").css("background-color", "transparent");
       $("li:odd").css( "background-color", "red"); 
   });
   $(".odd-p").click(function() {
       $("p, li").css("background-color", "transparent");
       $("p:odd").css( "background-color", "red"); 
   });
   $(".even-li").click(function() {
       $("p, li").css("background-color", "transparent");
       $("li:even").css( "background-color", "red"); 
   });
   $(".even-p").click(function() {
       $("p, li").css("background-color", "transparent");
       $("p:even").css( "background-color", "red"); 
   });
   $(".clear-oddeven").click(function() {
       $("p, li").css("background-color", "transparent");
   });
});
        </code>
    </pre>
    <br>
    
    <h4>Selectores :first, :eq, :gt, :lt, :slice</h4>
    Además de seleccionar elementos pares o impares, se pueden crear selecciones de otro tipo.
    <ol start="0">
        <li class="seleccion">Como elegir el primer elemento usando :first.</li>
        <li class="seleccion">Seleccionar el elemento número x usando :eq.</li>
        <li class="seleccion">Seleccionar los elementos mayores que x usando :gt.</li>
        <li class="seleccion">Seleccionar los elementos menores que x usando :lt.</li>
        <li class="seleccion">O seleccionar los elementos entre dos números usando :slice.</li>
    </ol>
    Número de la lista <input type="text" name="number" value="0" id="valorSelect"><br><br>
    Final slice<input type="text" name="number" value="5" id="valorSelect2"><br><br>
    <button type="button" class="btn btn-success first-li">Elemento first</button>
    <button type="button" class="btn btn-primary eq-li">Elementos eq()</button>
    <button type="button" class="btn btn-success gt-li">Elementos gt()</button>
    <button type="button" class="btn btn-primary lt-li">Elementos lt()</button>
    <button type="button" class="btn btn-primary slice-li">Elementos slice()</button>
    <button type="button" class="btn btn-primary clear-li">Limpiar estilos</button>
    <br>
    <pre>
        <code>
$(function() {
   $(".first-li").click(function() {
       $(".seleccion").css("background-color", "transparent");
       $(".seleccion:first").css( "background-color", "red"); 
   });
   $(".eq-li").click(function() {
       var valor = $("#valorSelect").val();
       $(".seleccion").css("background-color", "transparent");
       $(".seleccion:eq("+valor+")").css( "background-color", "red"); 
   });
   $(".gt-li").click(function() {
       var valor = $("#valorSelect").val();
       $(".seleccion").css("background-color", "transparent");
       $(".seleccion:gt("+valor+")").css( "background-color", "red"); 
   });
   $(".lt-li").click(function() {
       var valor = $("#valorSelect").val();
       $(".seleccion").css("background-color", "transparent");
       $(".seleccion:lt("+valor+")").css( "background-color", "red"); 
   });
   $(".slice-li").click(function() {
       var valor = $("#valorSelect").val();
       var valor2 = $("#valorSelect2").val();
       $(".seleccion").css("background-color", "transparent");
       $(".seleccion").slice(valor, valor2).css( "background-color", "red"); 
   });
   $(".clear-li").click(function() {
       $(".seleccion").css("background-color", "transparent");
   });
});
        </code>
    </pre>
    <br>
    <h4>Visible, Hidden y Animated</h4>
    <p> Al usar los pseudo-selectores visible y hidden, jQuery comprueba la actual visibilidad del element y no la propiedad del CSS. 
        jQuery mira si la altura y anchura física del elemento en la página son mayores de cero.
        Aunque esto no funciona con los elementos <tr> y por eso si que comprueba la propiedad CSS display en estos casos y lo considera hidden si la propiedad está en none.
    </p>
    <ul>
        <li>Se consideran “hidden” elementos con display none.</li>
        <li>Elementos de formularios type=”hidden”.</li>
        <li>Elementos con width y height igual a 0.</li>
        <li>Cuando su ancestro está hidden.</li>
    </ul>
    <p>Los elementos con “visibility:hidden” u “opacitiy:0” son considerados visibles.</p>

    <ol start="1">
        <li class="seleccion2">A mi si me ves.</li>
        <li class="seleccion2 element-hidden">A mi no.</li>
        <li class="seleccion2">Yo no me escondo.</li>
        <li class="seleccion2 element-hidden">Yo si lo estoy.</li>
    </ol>
    
    <button type="button" class="btn btn-success tell-hidden">Elementos escondidos</button>
    <button type="button" class="btn btn-primary show-hidden">Mostrar</button>
    <button type="button" class="btn btn-primary all-hidden">Esconder</button>
    <button type="button" class="btn btn-primary clear-li2">Limpiar estilos</button>
    <br>
    <br>
    <pre>
        <code>
$(function() {
   $(".tell-hidden").click(function() {
       var num = $(".seleccion2:hidden");
       alert("Los elementos escondidos son " + num.length);
   });
   $(".show-hidden").click(function() {
       $(".seleccion2:hidden").show();
   });
   $(".all-hidden").click(function() {
       $(".seleccion2").hide();
   });
   $(".clear-li2").click(function() {
       $(".seleccion2").show();
       $(".element-hidden").hide();
   });
});
        </code>
    </pre>
    <br>
    <h4>filter()</h4>
    <p>
        Dado un objeto jQuery que representa un conjunto de elementos DOM, 
        el método .filter () construye un nuevo objeto jQuery de un subconjunto
        de los elementos coincidentes. El selector suministrado se prueba contra
        cada elemento; Todos los elementos que coincidan con el selector se 
        incluirán en el resultado.<br>
        Por ejemplo, tenemos una lista.
    </p>
    <ul id="myList">
        <li><strong> item 0</strong> de la lista - one strong tag</li>
        <li><strong>item </strong> 1 <strong>de la lista</strong> -
          two <span>strong tags</span></li>
        {% for i in 2..7 %}
            <li> {{ i }} item de la lista</li>
        {% endfor %}
    </ul>
    <button id="myListFil">Pulsa para ver los pares</button>
    <button id="myListFil2">Pulsa para ver los pares</button>
    <br><br>
    <pre>
        <code>
$(function() {
    $("#myListFil").click(function() {
        $( "#myList li" ).filter( ":even" ).css( "background-color", "red" );
    });
});
        </code>
    </pre>
    <br>
    <pre>
        <code>
$("#myListFil2").click(function() {
    $( "#myList li" ).filter(function() {
      return $( "strong", this ).length === 1;
    })
      .css( "background-color", "red" );
});
        </code>
    </pre>
    <br>
    <p>O podemos filtrarlos según su contenido</p>
    
    <h3>Eligiendo los selectores</h3>
    <p>Elegir un buen selector es una manera de mejorar el rendimiento de JavaScript. Si se especifica mucho puede ser malo. Por ejemplo, un selector como “#myTable thead tr th.special” es malgastar recursos si puedes usar “#myTable th.special”.
    </p>
    <h4>¿Cómo saber si un selector contiene un elemento?</h4>
    <p>Para comprobar si un selector tiene algún elemento lo mejor es usar la propeidad ".length".
    Esta propiedad dice cuantos elementos se han seleccionado. 
    Si la respuesta es 0, la propiedad “.length” lo evaluará como “false” y será usado como un valor booleano.</p>
    <br>
    <pre>
        <code>
if ( $( "div.foo" ).length ) {
    ...
}
        </code>
    </pre>
    <br>
    <h4>Guardando las selecciones</h4>
    <p>Para salvar una selección es tan fácil como igualar una variable al selector.
        Una vez salvado puedes manipularlas como un objeto jQuery normal.
    </p>
    <br>
    <pre>
        <code>
var divs = $( "div" );
        </code>
    </pre>
    <br>
    <h4>Refinando y filtrando la selección</h4>
    <p>Se usan para mejorar la búsqueda de los elementos en la página</p>
    <h5>Selectores :has() y :not()</h5>
    <p>Selecciona elementos que contienen al menos un elemento que cuadra con el 
        selector especificado. En los navegadores modernos es mejor usar 
        $( "your-pure-css-selector" ).has( "selector/DOMElement" ).
    </p>
    <ul>
        <div id="padre-div">Soy un div y tengo un elemento li <li id="has-father">Yo tengo un padre div</li></div>
        <li>Yo no lo tengo y no tengo ningún id</li>
        
    </ul>
    <button type="button" class="btn btn-success div-has">Elemento tiene padre "padre-div"</button>
    <button type="button" class="btn btn-primary not-has">Elemento no tiene id "has-father"</button>
    <button type="button" class="btn btn-primary clear-li3">Limpiar estilos</button>
    <br><br>
    <pre>
        <code>
$(function() {
   $(".div-has").click(function() {
       $("#padre-div").has("li").css("background", "red");
   });
   $(".not-has").click(function() {
       $( "li" ).not( "#has-father").css("background", "red");;  
   });
   $(".clear-li3").click(function() {
       $("li").css("background-color", "transparent");
       $("#padre-div").css("background-color", "transparent");
   });
});
        </code>
    </pre>
    <br>
    <h4>find() y children()</h4>
    <p>
        Dado un objeto jQuery que representa un conjunto de elementos DOM, 
        el método .find () nos permite buscar a través de los descendientes 
        de estos elementos en el árbol DOM y construir un nuevo objeto jQuery 
        a partir de los elementos coincidentes. Los métodos .find () 
        y .children() son similares, excepto que el último sólo viaja un 
        nivel por el árbol DOM.
    </p>
    <p>
        La primera firma del método .find () acepta una expresión de selector 
        del mismo tipo que podemos pasar a la función $ (). Los elementos se 
        filtrarán probando si coinciden con este selector.
    </p>
    <h5>Hermanos, padres, vecinos...</h5>
    <p>jQuery nos permite numerosas formas de selección de los elementos incluídos en la página web.
        La forma en que los seleccionéis solo depende de vosotros. 
        Se puede buscar el padre de un elemento, los hijos, el primer hijo, el último, etc.
        Como veréis hay una gran variedad de selectores.
    </p>
    <div id="star-wars">
        <div id="shmi">
            <img id="shmi-img" class="ancestor" src="{{ asset('images/starwars/Shmi.jpg') }}">
            <div id="darth-vader" class="shmi-child">
                <img id="darth-vader-img" class="ancestor" src="{{ asset('images/starwars/darth-vader.jpeg') }}">
                <div id="luke" class="vader-child">
                    <img src="{{ asset('images/starwars/lukesky.jpg') }}">
                </div>
                <div id="leia" class="vader-child">
                    <img class="ancestor" src="{{ asset('images/starwars/princess-leia-organa.jpg') }}">
                    <div id="kylo" class="leia-child">
                        <img src="{{ asset('images/starwars/kylo.jpg') }}">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-success shmi-son">Hijos de Shmi</button>
    <button type="button" class="btn btn-success shmi-descendant">Descendientes de Shmi</button>
    <button type="button" class="btn btn-primary vader-children">Hijos de Vader</button>
    <button type="button" class="btn btn-success vader-descendant">Descendientes de Vader</button>
    <button type="button" class="btn btn-success luke-siblings">Hermano de Luke</button>
    <button type="button" class="btn btn-primary leia-son">Hijos de Leia Organa</button>
    <button type="button" class="btn btn-primary kylo-mother">Madre de Kylo</button>
    <button type="button" class="btn btn-primary kylo-ancestor">Ancestros de Kylo</button>
    <button type="button" class="btn btn-primary clear-li4">Limpiar estilos</button>
    <br><br>
    <br>
    <pre>
        <code>
&lt;div id="star-wars"&gt;
    &lt;div id="shmi"&gt;
        &lt;img id="shmi-img" class="ancestor" src="{{ asset('images/starwars/Shmi.jpg') }}"&gt;
        &lt;div id="darth-vader" class="shmi-child"&gt;
            &lt;img id="darth-vader-img" class="ancestor" src="{{ asset('images/starwars/darth-vader.jpeg') }}"&gt;
            &lt;div id="luke" class="vader-child"&gt;
                &lt;img src="{{ asset('images/starwars/lukesky.jpg') }}"&gt;
            &lt;/div&gt;
            &lt;div id="leia" class="vader-child"&gt;
                &lt;img class="ancestor" src="{{ asset('images/starwars/princess-leia-organa.jpg') }}"&gt;
                &lt;div id="kylo" class="leia-child"&gt;
                    &lt;img src="{{ asset('images/starwars/kylo.jpg') }}"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
        </code>
    </pre>
    <br>
    <br>
    <pre>
        <code>
$(function() {
   $(".shmi-son").click(function() {
       clear4();
       $( ".shmi-child>img" ).css( "border", "3px solid red" );
   });
   $(".vader-children").click(function() {
       clear4();
       $( ".vader-child>img" ).css( "border", "3px solid red" );
   });
   $(".leia-son").click(function() {
       clear4();
       $( ".leia-child>img" ).css( "border", "3px solid red" );
   });
   $(".shmi-descendant").click(function() {
       clear4();
       $( ".shmi-child img" ).css( "border", "3px solid red" );
   });
   $(".vader-descendant").click(function() {
       clear4();
       $( ".vader-child img" ).css( "border", "3px solid red" );
   });
   $(".luke-siblings").click(function() {
       clear4();
       $( "#luke ~ div" ).find(".ancestor").css( "border", "3px solid red" );
   });
   $(".kylo-mother").click(function() {
       clear4();
       $( "#kylo" ).parent().find(".ancestor").css( "border", "3px solid red" );
   });
   $(".kylo-ancestor").click(clear4,function() {
       clear4();
       $( "#kylo img" ).parentsUntil("#star-wars").find( ".ancestor" ).css( "border", "3px solid red" );
   });
   $(".clear-li4").click(clear4);
});

function clear4() {
    $("#star-wars img").css("border", "3px transparent");
    $("#star-wars div").css("border", "3px transparent");
}
        </code>
    </pre>
    <br>
    <h4>Seleccionando Elementos de un Formulario</h4>
    <p>jQuery permite usar pseudo-selectores para encontrar elementos de un formulario. 
        Hay muchos problemas para encontrar un tipo de elemento 
        basado en su estado o tipo mediante los selectores CSS estándar.
    </p>
    <h5>:checked</h5>
    <p>“:checked” pseudo-selector funciona con <span>checkboxes</span>, 
        <span>radio-buttons</span> y <span>selects</span>.</p>
    <br>
    <pre>
        <code>
$( "form :checked" );
        </code>
    </pre>
    <br>
    <h5>:disabled</h5>
    <p>El pseudo-selector “:disabled” funciona con cualquier “&lt;input&gt;”
        element con el atributo “disabled”. Para conseguir el mejor rendimiento, 
        es mejor usar “:disabled” junto a un “.filter(“:disabled”)” o usar 
        después un pseudo-selector junto a un tag name.
    </p>
    <br>
    <pre>
        <code>
$( "form:disabled" );
        </code>
    </pre>
    <br>
    <h5>:enabled</h5>
    <p>Es lo contrario de “:disabled”. Selecciona elementos que no tengan el atributo “disabled”.</p>
    <br>
    <pre>
        <code>
$( "form:enabled" );
        </code>
    </pre>
    <br>
    <h5>:input</h5>
    <p>Usar el selector “:input” permite seleccionar todos los elementos “&lt;input&gt;”, 
        “&lt;itextarea&gt;”, “&lt;select&gt;” y “&lt;button&gt;”.
    </p>
    <br>
    <pre>
        <code>
$( "form:input" );
        </code>
    </pre>
    <br>
    <h5>:selected</h5>
    <p>Usar el pseudo-selector “:selected”  se enfoca en cualquier elemento 
        seleccionado en elementos “&lt ;option&gt;”.
    </p>
    <br>
    <pre>
        <code>
$( "form:selected" );
        </code>
    </pre>
    <br>
    <div><form id="form-prueba">
      <input type="button" value="Input Button">
      <input type="checkbox">
      <input type="file">
      <input type="hidden">
      <input type="image">
      <input type="password">
      <input type="radio" name="asdf">
      <input type="radio" name="asdf">
      <input type="reset">
      <input type="submit">
      <input type="text">
      <select>
        <option>Option</option>
      </select>
      <textarea></textarea>
      <button>Button</button>
        </form></div><br>
    <button type="button" class="btn btn-success input-type">Número de inputs</button>
    <button type="button" class="btn btn-success pass-type">Tipo Password</button>
    <button type="button" class="btn btn-primary radio-type">Tipo Radio</button>
    <button type="button" class="btn btn-success reset-type">Tipo Reset</button>
    <button type="button" class="btn btn-success submit-type">Tipo Submit</button>
    <button type="button" class="btn btn-primary text-type">Tipo Text</button>
    <button type="button" class="btn btn-primary checkbox-type">Tipo Checkbox</button>
    <button type="button" class="btn btn-primary button-type">Tipo Button</button>
    <div id="form-result"></div>
    <br>
    <pre>
        <code>
$(function() {
   $(".input-type").click(function() {
        var allInputs = $( ":input");
        $( "#form-result" ).text( "Encontrados " + allInputs.length + " inputs." );
   });
   $(".pass-type").click(function() {
       var input = $( "input:password" ).css({
        background: "yellow",
        border: "3px red solid"
      });
      $( "#form-result" )
        .text( "Hay " + input.length + " input de tipo 'password'." )
        .css( "color", "red" );
   });
   $(".reset-type").click(function() {
       var input = $( "input:reset" ).css({
        background: "yellow",
        border: "3px red solid"
      });
      $( "#form-result" )
        .text( "Hay " + input.length + " input de tipo 'reset'." )
        .css( "color", "red" );
   });
   $(".radio-type").click(function() {
       var input = $( "input:radio" ).css({
        background: "yellow",
        border: "3px red solid"
      });
      $( "#form-result" )
        .text( "Hay " + input.length + " input de tipo 'radiobutton'." )
        .css( "color", "red" );
   });
   $(".submit-type").click(function() {
       var input = $( "input:submit" ).css({
        background: "yellow",
        border: "3px red solid"
      });
      $( "#form-result" )
        .text( "Hay " + input.length + " input de tipo 'submit'." )
        .css( "color", "red" );
   });
   $(".text-type").click(function() {
       var input = $( "input:text" ).css({
        background: "yellow",
        border: "3px red solid"
      });
      $( "#form-result" )
        .text( "Hay " + input.length + " input de tipo 'text'." )
        .css( "color", "red" );
   });
   $(".checkbox-type").click(function() {
       var input = $( "input:checkbox" ).css({
        background: "yellow",
        border: "3px red solid"
      });
      $( "#form-result" )
        .text( "Hay " + input.length + " input de tipo 'checkbox'." )
        .css( "color", "red" );
   });
   $(".button-type").click(function() {
       var input = $( "form input:button" ).css({
        background: "yellow",
        border: "3px red solid"
      });
      $( "#form-result" )
        .text( "Hay " + input.length + " input de tipo 'button'." )
        .css( "color", "red" );
   });
});
        </code>
    </pre>
    <br>
    
    
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/selectores.js') }}"></script>
{% endblock %}